<template>
    <div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="no">
                <el-col :span="12">
                    <span class="title">基本信息</span>
                </el-col>
                <el-col :span="12" style="text-align:right">
                    <span class="light-label">申请编号：{{ rollInfo.no }}</span>
                </el-col>
            </el-row>
            <el-row style="margin:10px 0">
                <el-col :span="6">
                    <span class="light-label">姓名：</span>
                    <span>{{ user.name }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="light-label">学号：</span>
                    <span>{{ user.studentId }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="light-label">学院：</span>
                    {{user.college}}
                </el-col>
                <el-col :span="6">
                    <span class="light-label">专业：</span>
                    {{user.major}}
                </el-col>
            </el-row>
            <el-row style="margin:10px 0">
                <el-col :span="6">
                    <span class="light-label">年级：</span>
                    <span>{{ user.grade }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="light-label">导师：</span>
                    <span>{{ user.teacher }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="light-label">填报人：</span>
                    <span>{{ user.submitterName }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="light-label">手机号码：</span>
                    <span>{{ user.phoneNumber }}</span>
                </el-col>
            </el-row>
        </el-card>
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="title">申请明细</h1>
            <el-row :gutter="20">
                <el-col :span="2.5" style=" line-height:32px">修改详情：</el-col>
                <el-col :span="21">
                    <table class="field-table">
                        <tr>
                            <td style="text-align:right;width:200px">
                                <div style="margin-right:10px">{{field.fieldName}}</div>
                            </td>
                            <td>
                                <div style="margin:0 10px">
                                    {{field.oldValue}}
                                    <span class="change-to">改为</span>
                                    {{field.newValue}}
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top:20px;margin-bottom:20px">
                <el-col :span="2.5">证明材料：</el-col>
                <el-col :span="21">
                    <!-- <a
                        href="#"
                        v-for="(file,index_) in files"
                        :key="index_"
                        @click="download(file.filePath,file.fileName)"
                        style="margin-right:10px"
                    >{{file.fileName}}</a> -->
                    <PreviewOffice
                    :newFileList="changeTutorEvidList"
                    />
                </el-col>
            </el-row>
            <el-row :gutter="20" style="border-bottom:1px solid #e6e6e6f; line-height: 42px;">
                <el-col :span="2.5">修改说明：</el-col>
                <el-col :span="21">
                    <div class="auto-row">{{field.modifyDesc}}</div>
                </el-col>
            </el-row>

            <h1 class="title" v-if="showBtn">审核</h1>
            <el-row :gutter="20" v-if="showBtn">
                <el-col :span="2.5">审批意见：</el-col>
                <el-col :span="21">
                    <div class="float-left" style="width: 50%">
                        <span class="majoy-text" style="width: 100%">
                            <el-input
                                :rows="3"
                                v-model="approvalInfo.content"
                                :disabled="rollInfo.result != 'Process'"
                                type="textarea"
                                placeholder="请输入内容"
                                style="width: 100%;min-height: 80px;"
                                maxlength="400"
                            />
                        </span>
                    </div>
                    <div class="float-left" style="width: 40%;color:red;text-indent:10px">最多输入长度400</div>
                </el-col>
            </el-row>
            <div class="edu-opertion-bar" v-if="showBtn">
                <div class="float-right">
                    <el-button
                        :disabled="rollInfo.result != 'Process'"
                        type="danger"
                        @click="submiteReject"
                    >{{$t("message.noPass")}}</el-button>
                    <el-button
                        :disabled="rollInfo.result != 'Process'"
                        type="primary"
                        @click="submiteThrough"
                    >{{$t("message.pass")}}</el-button>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="title">审批进度</h1>
            <el-table :data="details" stripe style="width: 100%">
                <el-table-column prop="id" label="序号" width="80" />
                <el-table-column prop="time" label="时间" width="160">
                    <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                </el-table-column>
                <el-table-column prop="approvorName" label="审批人" width="150" />
                <el-table-column prop="approvorRole" label="角色" width="120" />
                <el-table-column prop="result" label="审批结果" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.result == 'Submit'" type="success">提交</el-tag>
                        <el-tag v-if="scope.row.result == 'Process'" type="success">通过</el-tag>
                        <el-tag v-if="scope.row.result == 'End'" type="success">通过</el-tag>
                        <el-tag v-if="scope.row.result == 'Reject'" type="warning">驳回</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="setpId" label="审批节点" width="150" />
                <el-table-column prop="content" label="审批说明" show-overflow-tooltip />
                <!-- <el-table-column prop="fileInfo" label="审批材料">
                    <template slot-scope="scope">
                        <div v-if="scope.row.fileInfo">
                            <el-button
                                v-for="item in scope.row.fileInfo.approveAttachment"
                                :key="item"
                                type="text"
                                @click="handleGetFile(item)"
                            >{{ item }}</el-button>
                        </div>
                    </template>
                </el-table-column>-->
            </el-table>
        </el-card>
        <div style="height: 300px;margin-top:16px" v-if="!isRecall">
            <approvalProcessEchart :historyData="approvalHistoryData" :total="approvalTotal" :step='stepTotal' />
        </div>
    </div>
</template>
<script>
import {
    selectApproFlow,
    approvalThrough,
    approvalReject
} from "common/src/api/approval";
import { findUserInfoByIdType, findLocalUserById } from "common/src/api/user";
import { downloadfile } from "common/src/api/upload";
import filters from "common/src/filters";
import { mapActions } from "vuex";
import { getApproval, selectApproveHistory } from "common/src/api/studentRegister";
import fetch from "common/src/utils/fetch";
import utils from "common/src/utils;
import approvalProcessEchart from "../../student/approvalProcessEchart";
import PreviewOffice from "common/src/components/common/PreviewOffice.vue"
export default {
    name: "fieldCheck",
    components: {
        approvalProcessEchart,
        PreviewOffice
    },
    props: {
        paramId: {
            type: String,
            required: true
        },
        isRecall: {
            //是否撤销
            type: Boolean,
            default: false
        }
    },
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    data() {
        return {
            id: "",
            approvelId: "",
            rollInfo: [],
            changeTutorEvidList: [],
            user: {
                studentId: null,
                name: null,
                grade: null,
                college: null,
                major: null,
                teacher: null,
                phoneNumber: null,
                submitterName: null
            },
            field: {
                fieldName: null,
                oldValue: null,
                newValue: null,
                modifyDesc: null
            },
            approvalInfo: {
                uid: "",
                no: "",
                content: "",
                approveAttachment: [],
                remark: null
            },
            departmentName: "",
            showBtn: false,
            details: [],
            files: null,
            approvalHistoryData: null,
            stepTotal: null,
            approvalTotal: 0
        };
    },
    mounted() {
        if (this.paramId.indexOf("-") != -1) {
            let params = this.paramId.split("-");
            this.id = params[0];
            this.approvelId = params[1];
            if (params.length == 3 && params[2] == "1") {
                this.showBtn = true;
            }
            this.initPage(this.id);
            getApproval(this.approvelId).then(res => {
                if (res.code == 200) {
                    this.user.name = res.data.name;
                    this.user.grade = res.data.grade;
                    this.user.college = res.data.facultyI18n;
                    this.user.major = res.data.professionI18n;
                    this.user.studentId = res.data.studentId;
                    this.user.teacher = res.data.teacherId;
                    this.user.phoneNumber = res.data.phoneNumber;

                    this.field.modifyDesc = res.data.modifyDescri;
                    this.field.oldValue = res.data.oldFieldValue;
                    if(res.data.newFieldValue && res.data.newFieldValue.indexOf("/") != -1) {
                        this.field.newValue = res.data.newFieldValue.substring(res.data.newFieldValue.lastIndexOf("/")+1)
                    } else {
                        this.field.newValue = res.data.newFieldValue
                    }
                    
                    this.field.fieldName = res.data.fieldName;
                    selectApproveHistory(res.data.workflowNo).then(res => {
                        if (res.code == 200) {
                            this.details = res.data;
                            if (res.data.length > 0) {
                                res.data[0].result = "Submit";
                            }
                        }
                    });
                    if (res.data.evidence) {
                        this.files = [];
                        // res.data.evidence.split(",").forEach(path => {
                        //     let obj = {};
                        //     obj.filePath = path;
                        //     if (path.indexOf("/") != -1) {
                        //         obj.fileName = path.substr(
                        //             path.lastIndexOf("/") + 1
                        //         );
                        //     } else {
                        //         obj.fileName = path;
                        //     }
                        //     this.files.push(obj);
                        // });
                       
                        let filesList = []
                        let evidList = res.data.evidence.split(",")
                       filesList = evidList.map(files=> {
                           return {
                                name: files.substring(files.lastIndexOf("/")+1),
                                url: files
                            }
                        })
                        this.changeTutorEvidList = filesList
                        
                    }
                }
            });
        } else {
            this.id = this.paramId;
        }
    },
    methods: {
        _init_(user) {
            const query = "userId=" + user.uid + "&type=" + user.type;
            findUserInfoByIdType(query).then(res => {
                if (res.code === 200 && res.data) {
                    res.data.userType = user.type;
                    this.user = res.data;
                }
            });
        },
        _initLocalUser(uid) {
            findLocalUserById("userId=" + uid).then(res => {
                if (res.code === 200 && res.data) {
                    this.user = res.data;
                    this.user.name = res.data.userName;
                }
            });
        },
        initPage(id) {
            selectApproFlow(id).then(res => {
                if (res && res.data) {
                    this.approvalInfo.uid = res.data.applicantId;
                    this.approvalInfo.no = res.data.no;
                    this.approvalInfo.time = res.data.time;
                    let result = JSON.parse(res.data.content);
                    this.rollInfo = res.data;
                    this.user.submitterName = res.data.submitterName;
                    this.approvalTotal = res.data.stepTotal;
                    this.approvalHistoryData = this.rollInfo.listApproveHistory;
                    this.stepTotal = this.rollInfo.step;
                } 
            });
        },
        handleGetFile(objectkey) {
            if (!objectkey) return;
            downloadfile(objectkey);
        },
        submiteThrough() {
            approvalThrough(this.approvalInfo).then(res => {
                this.$message({
                    type: "success",
                    message: "审批通过"
                });
                this.$emit("change");
            });
        },
        submiteReject() {
            if (
                this.approvalInfo.content.replace(/^\s+|\s+$/g, "").length == 0
            ) {
                this.$message({
                    type: "warning",
                    message: "审批意见必须填写"
                });
                return;
            }
            approvalReject(this.approvalInfo).then(res => {
                this.$message({
                    type: "success",
                    message: "审批驳回"
                });
                this.$emit("change");
            });
        },
        download(filePath, fileName) {
            fetch({
                url:
                    "/api/commonservice/obsfile/downloadfile?objectkey=" +
                    filePath,
                responseType: "blob"
            }).then(resp => {
                if (!resp) {
                    return;
                }
                let url = window.URL.createObjectURL(new Blob([resp]));
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", fileName);
                document.body.appendChild(link);
                link.click();
            });
        }
    }
};
</script>
<style scoped>
.div-main {
    margin-bottom: 16px;
}
.no {
    border-bottom: 1px solid #e6e6e6;
    line-height: 42px;
    margin-bottom: 20px;
}
.light-label {
    color: #4c5c70;
    font-size: 14px;
}
.field-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000000;
}
td {
    line-height: 32px;
    border-collapse: collapse;
    border: 1px solid #000000;
}
.require-field {
    color: red;
}
.auto-row {
    word-wrap: break-word;
}
.title {
    font-weight: bold;
    color: #2b3b4e;
    font-size: 18px;
}
</style>